<template>
	<view class="">
		<view class="bg-white">
			<view class="flex justify-between align-center padding-20 border-b">
				<text>{{detailed.appointId}}</text>
				<text>{{
					detailed.status===1?'待到店': 
					detailed.status===4?'已取消':
					detailed.status===2?'已到店':
					detailed.status===3?'已开单':
					detailed.status===5?'待服务':
					detailed.status===9?'已服务':''
				}}</text>
			</view>
			<view class="pl-20 pb-20 pr-20 border-b">
				<view class="flex pt-20" v-for="project in detailed.items" :key="project.id">
					<view class="shink0">
						<u-avatar shape="square" :src="project.projectImage || '/static/logo.png'" size="50"/>
					</view>
					<view class="w-100 ml-20 flex flex--row justify-between">
						<text>{{project.itemName}}</text>
						<view class="line-gray fsize-28 flex justify-between align-center">
							<view>
								<text>服务员: {{project.staffName || '到店安排'}}</text>
								<text class="ml-10">销售员: {{project.salerName || '--'}}</text>
							</view>
							<text class="ml-10 line-red">￥{{project.price}}</text>
						</view>
					</view>
				</view>
				
			</view>
			<!-- <view class="flex justify-between align-center padding-20 border-b">
				<text>订单号</text>
				<text class="line-gray">{{detailed.statusText}}</text>
			</view>
			<view class="flex justify-between align-center padding-20 border-b">
				<text>下单时间</text>
				<text class="line-gray">{{detailed.date}}</text>
			</view>
			<view class="flex justify-between align-center padding-20 border-b">
				<text>服务人员</text>
				<text class="line-gray">{{detailed.staffName}}</text>
			</view>
			<view class="flex justify-between align-center padding-20 border-b">
				<text>销售人员</text>
				<text class="line-gray">{{detailed.staffName}}</text>
			</view> -->
		</view>
		<view class="padding-20 fsize-28 line-gray">客户信息</view>
		<view class="bg-white">
			<view class="flex justify-between align-center padding-20 border-b">
				<text>下单时间</text>
				<text class="line-gray">{{detailed.date}}</text>
			</view>
			<view class="flex justify-between align-center padding-20 border-b">
				<text>客户ID</text>
				<text class="line-gray">{{detailed.userId}}</text>
			</view>
			<view class="flex justify-between align-center padding-20 border-b">
				<text>联系方式</text>
				<text class="line-gray">{{detailed.userPhone}}</text>
			</view>
			<view class="flex justify-between align-center padding-20 border-b">
				<text>客户昵称</text>
				<text class="line-gray">{{detailed.userName}}</text>
			</view>
			<view class="flex justify-between align-center padding-20 border-b">
				<text>留言</text>
				<text class="line-gray">{{detailed.remark}}</text>
			</view>
		</view>
		<view class="bottom-button flex justify-end pt-10">
			<view class="mr-20" v-if="detailed.status===5">
				<u-tag 
					bgColor="#e54d42" 
					borderColor="#e54d42" 
					color="#fff" 
					text="确认服务" 
					shape="circle" 
					@click="confirmRs(detailed.id)"
				/>
			</view>
			<view v-if="detailed.status===6 || detailed.status===5">
				<u-tag 
					bgColor="#e54d42" 
					borderColor="#e54d42" 
					color="#fff" 
					text="取消预约" 
					shape="circle" 
					@click="onDelrs(detailed.id)"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				detailed:{}
			}
		},
		onLoad(opt){
			this.getDetailed(opt.id)
		},
		methods: {
			confirmRs(id){
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认该服务项目已完成?',
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('ConfirmAppointment', { id: id }).then(res=>{
								that.getDetailed(id)
								that.$refs.uToast.show({ message:res.msg })
							})
						}
					}
				})
			},
			onDelrs(id){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已沟通客户，并取消改预约订单?',
					success: function (res) {
						if (res.confirm) {
							that.$reqJsonPost('StoreStaffDoSetisCancel', { id: id }).then(res=>{
								that.dataList=that.dataList.filter(im=>im.id !== id)
							})
						}
					}		
				})
			},
			getDetailed(id){
				// this.$reqJsonPost('StoreStaffDoSetisGetDetails', {id: id}).then(res=>{
				this.$reqJsonPost('GetStaffAppointmentDetail', {id: id}).then(res=>{
					this.detailed = res.data
				})
			}
		}
	}
</script>

<style>
</style>